Consumo de API com HTML e JavaScript

Uma introdução ao fetch e axios

O que é uma API?

API significa Application Programming Interface (Interface de Programação de Aplicações).

É um conjunto de regras e definições que permite que diferentes aplicações se comuniquem entre si.

Funciona como um "contrato" que define como um software pode interagir com outro.

API REST

REST (REpresentational State Transfer) é um estilo de arquitetura para criar APIs. As APIs que seguem o padrão REST são chamadas de RESTful.

• Cliente-Servidor: Separação de responsabilidades.
• Stateless: Cada requisição é independente.
• Uso de métodos HTTP: GET, POST, PUT, DELETE.
• Uso de URLs (Endpoints): Para identificar os recursos (ex: /character).

A API do Rick and Morty

Para nossos exemplos, usaremos a The Rick and Morty API.

• URL Base: https://rickandmortyapi.com/api
• Endpoints Principais:
  • /character: Para personagens.
  • /location: Para localizações.
  • /episode: Para episódios.

Exemplo: Para buscar o personagem com ID 2 (Morty Smith), usamos a URL:
https://rickandmortyapi.com/api/character/2

Método 1: fetch API

O fetch é uma API nativa dos navegadores modernos para fazer requisições de rede. Ele é baseado em Promises.

Sintaxe com .then()

fetch('https://rickandmortyapi.com/api/character/1')
  .then(response => response.json()) // Converte a resposta para JSON
  .then(data => {
  console.log(data); // Exibe os dados do personagem
  })
  .catch(error => {
  console.error('Erro:', error);
  });

fetch com async/await

async/await é uma forma mais "limpa" e moderna de trabalhar com Promises.

async function getCharacter() {
  try {
  const response = await fetch('https://rickandmortyapi.com/api/character/1');
  const data = await response.json();
  console.log(data);
  } catch (error) {
  console.error('Erro:', error);
  }
}

getCharacter();

Exemplo Prático com fetch

Vamos buscar um personagem e exibi-lo na tela.

HTML:

<h1>Personagem de Rick and Morty</h1>
<div id="character-container"></div>

JavaScript:

const container = document.getElementById('character-container');

async function fetchCharacter() {
  const response = await fetch('https://rickandmortyapi.com/api/character/1');
  const data = await response.json();
  
  container.innerHTML = `
  <h2>${data.name}</h2>
  <img src="${data.image}" alt="${data.name}">
  <p>Status: ${data.status}</p>
  <p>Espécie: ${data.species}</p>
  `;
}

fetchCharacter();

Método 2: axios

axios é uma biblioteca de cliente HTTP baseada em Promises para navegador e Node.js. Ela simplifica o processo de fazer requisições.

Vantagens:

• Sintaxe mais simples.
• Converte dados para JSON automaticamente.
• Melhor tratamento de erros.

Instalação (via CDN):

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios com .then()

axios.get('https://rickandmortyapi.com/api/character/2')
  .then(response => {
  // A resposta já vem em JSON no objeto 'data'
  console.log(response.data); 
  })
  .catch(error => {
  console.error('Erro:', error);
  });

axios com async/await

async function getCharacter() {
  try {
  const response = await axios.get('https://rickandmortyapi.com/api/character/2');
  console.log(response.data);
  } catch (error) {
  console.error('Erro:', error);
  }
}

getCharacter();

fetch vs. axios

Característica	fetch	axios
Nativo	Sim	Não (precisa instalar)
Conversão JSON	Manual (response.json())	Automática
Tratamento de Erro	Não rejeita em erros HTTP (404, 500)	Rejeita em erros HTTP
Sintaxe	Mais verbosa	Mais concisa
Compatibilidade	Navegadores modernos	Ampla (navegadores e Node.js)

Exemplo Prático: Listando Personagens

Vamos buscar vários personagens e criar uma lista.

HTML:

<h1>Personagens de Rick and Morty</h1>
<ul id="character-list"></ul>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

JavaScript (com axios):

const list = document.getElementById('character-list');

async function fetchAllCharacters() {
  const response = await axios.get('https://rickandmortyapi.com/api/character');
  const characters = response.data.results;

  characters.forEach(char => {
  list.innerHTML += `<li><img src="${char.image}" width="50"> ${char.name}</li>`;
  });
}

fetchAllCharacters();

Dúvidas?

https://docs.google.com/forms/d/e/1FAIpQLSeeGYuD87Vn2Dv4YDfUSU_1xXlDqpM3IVyN_WvpqMz3MaNzrA/viewform?usp=dialog